<template>
  <div>
    <div class="boxbox">
      <el-form :inline="true" :model="formData" class="demo-form-inline" size="middel" label-width="45px">
        <el-form-item label="名称">
          <el-input v-model="formData.name" placeholder="试卷名称" style="width: 100px;"></el-input>
        </el-form-item>
        <el-form-item label="语文">
          <el-input v-model="formData.yuwen" placeholder="分数" style="width: 100px;"></el-input>
        </el-form-item>
        <el-form-item label="数学">
          <el-input v-model="formData.math" placeholder="分数" style="width: 100px;"></el-input>
        </el-form-item>
        <el-form-item label="英语">
          <el-input v-model="formData.english" placeholder="分数" style="width: 100px;"></el-input>
        </el-form-item>
        <el-form-item label="物理">
          <el-input v-model="formData.wuli" placeholder="分数" style="width: 100px;"></el-input>
        </el-form-item>
        <el-form-item label="化学">
          <el-input v-model="formData.huaxue" placeholder="分数" style="width: 100px;"></el-input>
        </el-form-item>
        <el-form-item label="生物">
          <el-input v-model="formData.shengwu" placeholder="分数" style="width: 100px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">添加</el-button>
        </el-form-item>
      </el-form>
      <hr>
      <el-table
        :data="tableData"
        style="width: 100%"
        max-height="250">
        <el-table-column
          fixed
          prop="name"
          label="试卷名称"
          width="130">
        </el-table-column>
        <el-table-column
          prop="yuwen"
          label="语文"
          width="130">
        </el-table-column>
        <el-table-column
          prop="math"
          label="数学"
          width="130">
        </el-table-column>
        <el-table-column
          prop="english"
          label="英语"
          width="130">
        </el-table-column>
        <el-table-column
          prop="wuli"
          label="物理"
          width="130">
        </el-table-column>
        <el-table-column
          prop="huaxue"
          label="化学"
          width="130">
        </el-table-column>
        <el-table-column
          prop="shengwu"
          label="生物"
          width="130">
        </el-table-column>
        <el-table-column
          label="操作"
          width="130"
        >
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small">
              移除
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center">
          <template slot="header" slot-scope="{ column }">
            <div>
              <span>{{ column.label }}</span>
              <el-button size="lager" @click="onAction()">开始分析</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>


      <div class="boxbox">
        <h3 class="index-title-h3" style="border-left: solid 12px #3651d4">
          单次各科成绩分析
        </h3>
        <img :src='imgList[0]'/>
      </div>
      <div class="boxbox">
        <h3
          class="index-title-h3"
          style="border-left: solid 12px rgb(220, 208, 65)"
        >
          历史各科成绩分析
        </h3>
        <img :src='imgList[1]'/>
      </div>
      <div class="boxbox">
        <h3 class="index-title-h3" style="border-left: solid 12px #2ce8b4">
          历史成绩分析
        </h3>
        <img :src='imgList[2]'/>
      </div>
    </div>
  </div>
</template>
<script>
import studyApi from '@/api/study'

export default {
  data () {
    return {
      imgList: [
        'http://localhost:9001/ksxt/228977ab-6016-4ba7-8d5b-047de30ca833.jpg',
        'http://localhost:9001/ksxt/228977ab-6016-4ba7-8d5b-047de30ca833.jpg',
        'http://localhost:9001/ksxt/228977ab-6016-4ba7-8d5b-047de30ca833.jpg'
      ],
      tableData: [],
      formData: {
        name: '',
        yuwen: '',
        math: '',
        english: '',
        wuli: '',
        huaxue: '',
        shengwu: ''

      }
    }
  },
  methods: {
    deleteRow (index, rows) {
      rows.splice(index, 1)
    },
    onSubmit () {
      this.tableData.push(this.formData)
      this.formData = {
        name: '',
        yuwen: '',
        math: '',
        english: '',
        wuli: '',
        huaxue: '',
        shengwu: ''

      }
    },
    onAction () {
      console.log('开始分析按钮被点击了')
      studyApi.update(this.tableData).then((data) => {
        this.imgList = data.response
      })
    }
  },
  created () {
    this.getImg()
  },
}
</script>

<style scoped>
.head {
  margin: 50px auto;
  width: 100%;

}

.el-input__inner {
  width: 50%;
}

.index-title-h3 {
  font-size: 22px;
  font-weight: 400;
  color: #1f2f3d;
  border-left: solid 10px #2ce8b4;
  padding-left: 10px;
}

.boxbox {
  width: 70%;
  margin: 100px auto;
}

el-input {
  width: 40%;
}

img {

  background-color: #fff;
  width: 100%;
  border: 1px solid black;

}
</style>
